<template>
  <div style="display: none">{{ _ids }}</div>
  <div class="PickerInput">
    <div v-if="loading" class="inputInner disabled">
      <a-spin size="small" :indicator="indicator">
      </a-spin>
    </div>
    <div v-if="!loading" class="inputInner" :class="{disabled}" @click="open">
      <div class="tagBox">
        <template v-if="type=='人员'">
          <a-tag :key="key" :color="disabled?'':'blue'" v-for="(item,key) in selectedMembers">{{ item.name }} {{
              item.empNo
            }}
          </a-tag>
        </template>
        <template v-if="type=='部门'">
          <a-tag :key="key" :color="disabled?'':'blue'" v-for="(item,key) in selectedDepts">{{ item.name }}
          </a-tag>
        </template>
        <template v-if="type=='岗位'">
          <a-tag :key="key" :color="disabled?'':'blue'" v-for="(item,key) in selectedRoles">{{ item.name }}
          </a-tag>
        </template>
      </div>
      <div class="closeBox">
        <SvgClose v-if="_ids && Array.isArray(_ids) && _ids.length>0" class="close" @click.stop.prevent="clear"/>
      </div>
    </div>
  </div>
  <DrawerPicker ref="drawerPicker" :show-selected-user="true" @ok="drawerOk" @cancel="drawerCancel"
                :show-check-box="true" :multiple="multiple"
                v-model:visible="visibleDrawer" :type="type"/>
</template>
<script setup name="PickerInput">
import userSelectorPlusApi from '@/api/components/Selector/userSelectorPlusApi'
import orgApi from '@/api/sys/orgApi'
import roleApi from '@/api/sys/roleApi'
import {listToTree, trans} from "@/utils/util";
import {LoadingOutlined} from '@ant-design/icons-vue';
import SvgClose from "@/components/SvgIcons/SvgClose";
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '16px',
  },
  spin: true,
});
let selectedMembers = ref()
let selectedDepts = ref()
let selectedRoles = ref()
const panesValues = ['人员', '部门', '岗位']
const emit = defineEmits({
  'update:ids': undefined
})
let drawerPicker = ref()
let listDepts = ref()
let listRoels = ref()
let loading = ref(false)
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  ids: {
    type: Array,
    default: () => undefined
  },
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: true
  },
})
let clear = () => {
  _ids.value = undefined
}
let _ids = computed({
  get: () => {
    loading.value = true
    if (props.ids && Array.isArray(props.ids) && props.ids.length > 0) {
      //人员
      if (props.type == panesValues[0]) {
        userSelectorPlusApi
            .getUsersByUserIds(
                '/sys/user/ids',
                props.ids.map((res) => {
                  return {
                    id: res
                  }
                })
            ).then((res) => {
          selectedMembers.value = res
          loading.value = false
        })
      }
      //部门
      else if (props.type == panesValues[1]) {
        orgApi.orgTree().then((res) => {
          listDepts.value = trans(res)
          selectedDepts.value = listDepts.value.filter((res) => {
            return props.ids.includes(res.id)
          })
          loading.value = false
        })
      }
      //岗位
      else if (props.type == panesValues[2]) {
        roleApi
            .rolePage({
              current: 1,
              size: 9999
            })
            .then((res) => {
              listRoels.value = res.records
              selectedRoles.value = listRoels.value.filter((res) => {
                return props.ids.includes(res.id)
              })
              loading.value = false
            })
      }
    } else {
      //人员
      if (props.type == panesValues[0]) {
        selectedMembers.value = []
        loading.value = false
      }
      //部门
      else if (props.type == panesValues[1]) {
        selectedDepts.value = []
        loading.value = false
      }
      //岗位
      else if (props.type == panesValues[2]) {
        selectedRoles.value = []
        loading.value = false
      }
    }
    return props.ids
  },
  set: (val) => {
    emit('update:ids', val)
  }
})
const visibleDrawer = ref(false)
const drawerOk = (data) => {
  switch (props.type) {
    case panesValues[0]: {
      if (data.data.members && Array.isArray(data.data.members) && data.data.members.length > 0) {
        let result = JSON.parse(JSON.stringify(data.data.members.map((res) => {
          return res.id
        })))
        _ids.value = result
      } else {
        _ids.value = undefined
      }
      break
    }
    case panesValues[1]: {
      if (data.data.depts && Array.isArray(data.data.depts) && data.data.depts.length > 0) {
        let result = JSON.parse(JSON.stringify(data.data.depts.map((res) => {
          return res.id
        })))
        _ids.value = result
      } else {
        _ids.value = undefined
      }
      break
    }
    case panesValues[2]: {
      if (data.data.roles && Array.isArray(data.data.roles) && data.data.roles.length > 0) {
        let result = JSON.parse(JSON.stringify(data.data.roles.map((res) => {
          return res.id
        })))
        _ids.value = result
      } else {
        _ids.value = undefined
      }
      break
    }
  }
}
onMounted(() => {
})
const drawerCancel = () => {
}
const open = () => {
  if (props.disabled) {
    return
  }
  visibleDrawer.value = true
  setTimeout(() => {
    if (_ids.value && Array.isArray(_ids.value) && _ids.value.length > 0) {
      //人员
      if (props.type == panesValues[0]) {
        drawerPicker.value.setMembersSelectedLoading(true)
        userSelectorPlusApi
            .getUsersByUserIds(
                '/sys/user/ids',
                _ids.value.map((res) => {
                  return {
                    id: res
                  }
                })
            ).then((res) => {
          drawerPicker.value.setMembers(res)
          drawerPicker.value.setMembersSelectedLoading(false)
        })
      } else if (props.type == panesValues[1]) {
        drawerPicker.value.setDepts(selectedDepts.value)
      } else if (props.type == panesValues[2]) {
        drawerPicker.value.setRoles(selectedRoles.value)
      }
    }
  }, 100)
}
</script>
<style scoped lang="less">
.PickerInput {
  .inputInner {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    height: 34px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    .tagBox {
      &::-webkit-scrollbar {
        height: 3px;
      }
      & > span:first-child {
        margin-left: 12px;
      }
      &.disabled {
        border-color: #d9d9d9;
        color: #00000040;
        background-color: #0000000a;
        cursor: not-allowed;
      }
      flex: 1 1 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      overflow: hidden;
      overflow-x: auto;
    }
    .closeBox {
      flex: 20px;
      .close {
      }
    }
  }
}
</style>
